<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/logo1.jpg" alt="">
        <span >我的博客系统</span>
        <!-- 空白元素用来占位 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>
      <!-- 这里的.container作为页面的版心 -->
    <div class="container">
        <div class="left">
        <!-- 左侧个人信息 -->
          <div class="card">
          <img src="image/user.jpg" alt="">
           <h3></h3>
           <a href="#">github地址</a>
           <div class="counter">
            <span>文章</span>
            <span>分类</span>
           </div>
           <div class="counter">
            <span>2</span>
            <span>3</span>
           </div>
        </div>
    </div>
        <div class="right">
           <!-- 右侧内容详情 -->
           <!-- .blog就对应一个博客 -->
           <div class="blog">
            <div class="title">
                我的第一篇博客
            </div>
            <div class="data">
                2022-12-25
            </div>
            <div class="desc">
                从今天起,我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, sunt! Maiores officiis commodi nemo atque consectetur consequatur obcaecati facilis voluptas quis laudantium incidunt magni sint odio nam unde, tempore cumque.

            </div>
            <a href="#">查看全文&gt;&gt;</a>
           </div>
           <div class="blog">
            <div class="title">
                我的第一篇博客
            </div>
            <div class="data">
                2022-12-25
            </div>
            <div class="desc">
                从今天起,我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, sunt! Maiores officiis commodi nemo atque consectetur consequatur obcaecati facilis voluptas quis laudantium incidunt magni sint odio nam unde, tempore cumque.

            </div>
            <a href="#">查看全文&gt;&gt;</a>
           </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
    //在页面加载的时候,通过 Ajax 给服务器发送数据,获取到博客的列表信息,并且显示到页面中
    function getBlogList(){
        $.ajax({
            type:'get',
            url:'blog',
            success:function(body){
                //获取到body就是一个js对象数组,每个元素就是一个js对象
                //1. 先把.right 里原有的内容全部清空
                let rightDiv = document.querySelector('.right');
                rightDiv.innerHTML ='';
                // 2.遍历 body ,构造出一个个的 blogdiv
                for(let blog of body){
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';
                    //构造标题
                    let titleDiv = document.createElement('title');
                    titleDiv.className = 'title';
                    blogDiv.appendChild(titleDiv);
                    // 构造发布时间
                    let dataDiv = document.createElement('div');
                    dataDiv.className = 'data';
                    dataDiv.innerHTML = blog.postTime;
                    blogDiv.appendChild(dataDiv);
                    //构造博客的摘要内容
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.content;
                    blogDiv.appendChild(descDiv);
                    //构造查看全文
                    let a =document.createElement('a');
                    a.innerHTML = '查看全文 &gt;&gt;';
                    //此处希望点击之后能够跳转到博客详情页!!
                    //这个跳转过程需要告知服务器要访问的是哪个博客的详情页.
                    a.href ='blog_detail.html?blogId=' + blog.blogId;
                    blogDiv.appendChild(a);

                    //把 blogFDiv 挂到 dom 树上!
                    rightDiv.appendChild(blogDiv);

                }
            },
            error: function(){
                alert("获取列表页失败!")
            }
        });
    }
    getBlogList();

    //加上一个逻辑,通过 get/ login 这个接口来获取下当前的登录状态
    function getUserInfo(){
        $.ajax({
            type:'get',
            url:'login',
            success: function(body){
                //判定此处的 body 是不是一个有效的 user 对象(userID 是否为0)
                if(body.userId && body.userId > 0){
                    //登录成功!不做处理
                    console.log("当前用户登陆成功!用户名: "+body.username);
                }else{
                    //登录失败!
                    //让前端页面跳转到 login.html 
                    alert("当前您并未登录!请登录后再访问博客列表!");
                    location.assign('blog_login.html');
                }
            },
            error: function(){
                alert("您当前尚未登录!请登录后再访问博客列表!");
                location.assign('blog_login.html');
            }
        });
    }
    getUserInfo();
    
  </script>
  <script src="js/checkUserInfo.js"></script>
    <script >
        getUserInfo("blog_list.html");
    </script>

</body>
</html>